<template>
    <Dropdown v-model="itemName">
        <i class="iconfont icon-in" style="cursor: pointer;font-size: 18px;"></i>
        <template #list>
            <DropdownMenu>
                <DropdownItem  @click="changeLanguage('zh-CN')" :class="['zh-CN' === $i18n.locale ? 'selected' : '']">简体中文</DropdownItem>
                <DropdownItem  @click="changeLanguage('en-US')" :class="['en-US' === $i18n.locale ? 'selected' : '']">English</DropdownItem>
            </DropdownMenu>
        </template>
    </Dropdown>
</template>


<script setup lang ='ts'>
import { ref,getCurrentInstance,type  ComponentInternalInstance } from 'vue'
const {proxy} = getCurrentInstance() as ComponentInternalInstance 
const itemName = ref<string | null>(proxy && proxy.$i18n.locale)
// changeLanguage
const changeLanguage = (name:string)=>{

    if(proxy)proxy.$i18n.locale = name 
}
</script>


<style lang = 'scss' scoped>
.selected {
    color: rgb(45, 140, 240);   
    background-color: rgb(240, 250, 255);   
}
</style>